<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title> 个人中心</title>
	<meta name="keywords" content="{$site_info.site_seo_keywords|default=''}" />
	<meta name="description" content="{$site_info.site_seo_description|default=''}">
	<include file="public@head" />
	<link type="text/css" rel="stylesheet" href="__TMPL__/public/assets/simpleboot3/cropper/cropper.css" />
	<style type="text/css">
		.tab-content {
			overflow: visible !important;
		}

		.uploaded_avatar_area {
			margin-top: 20px !important;
		}

		.uploaded_avatar_btns {
			margin-top: 20px !important;
		}

		.uploaded_avatar_area .uploaded_avatar_btns {
			display: none !important;
		}

		/* avatarCropper */
		.avatarwrap,
		.avatar-Tools {
			width: 475px !important;
			height: 310px !important;
			margin: 20px 0 0 0 !important;
		}

		.avatarwrap .avatar-cropper {
			float: left !important;
			width: 300px !important;
			height: 300px !important;
			border: 1px solid #3e4664 !important;
			display: block !important;
			overflow: hidden !important;
		}

		.avatar-cropper img {
			max-width: 100% !important;
		}

		.avatarwrap .avatar-preview {
			float: left !important;
			width: 150px !important;
			margin: 0 0 0 22px !important;
		}

		.avatar-preview .UserPreview {
			width: 100% !important;
			margin: 0 !important;
		}

		.UserPreview .img-preview {
			width: 150px !important;
			height: 150px !important;
			border: 1px solid #3e4664 !important;
			margin: 0 0 20px 0 !important;
			padding: 0 !important;
			display: block !important;
			overflow: hidden !important;
		}

		.UserPreview .preview-md {
			width: 80px !important;
			height: 80px !important;
		}

		.UserPreview .preview-sm {
			width: 30px !important;
			height: 30px !important;
			margin: 0 !important;
		}

		.avatar-Tools {
			margin: 0 !important;
			height: auto !important;
		}

		.avatar-Tools .btn-group {
			margin: 0 0 5px 0 !important;
		}

		.avatar-Tools .btnsave {
			margin: 1px 0 0 0 !important;
		}

		.avatar-Tools>.btn-group>.btn {
			width: 75.5px !important;
		}
	</style>
</head>

<body id="user">
	<div class="wrapper hp_1">
		<!-- 导航 -->
		<include file="public@nav" />
		<!-- //导航 -->
		<section class="user-account mb-5">
			<div class="container">
				<div class="row">
					<div class="col-lg-3">
						<div class="sidebar">
							<div class="widget video_info pr sp">
								<span class="vc_hd">
									<img src="{:cmf_get_image_url($user.avatar)}" class="img-fluid rounded-circle"
										alt="">
								</span>
								<h4>{$user.user_nickname}</h4>
								<p>创建于 : {:date('m-d',$user.create_time)} . {:date('Y',$user.create_time)}</p>
							</div>
							<div class="widget vid-ac">
								<h2 class="hd-uc"><i class="icon-play"></i>作品 </h2>
								<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
									aria-orientation="vertical">
									<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill"
										href="#v-pills-home" role="tab" aria-controls="v-pills-home"
										aria-selected="true">最新作品</a>
									<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill"
										href="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
										aria-selected="false">收藏作品</a>
									<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill"
										href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
										aria-selected="false">点赞作品</a>
									<h2 class="hd-uc mt-4"><i class="icon-user"></i>用户</h2>
									<a class="nav-link" id="v-pills-avatar-tab" data-toggle="pill"
										href="#v-pills-avatar" role="tab" aria-controls="v-pills-avatar"
										aria-selected="true">修改头像</a>
									<a class="nav-link" id="v-pills-user-tab" data-toggle="pill" href="#v-pills-user"
										role="tab" aria-controls="v-pills-user"
										aria-selected="true">关注({$user.follow_count})</a>
									<a class="nav-link" id="v-pills-fans-tab" data-toggle="pill" href="#v-pills-fans"
										role="tab" aria-controls="v-pills-fans"
										aria-selected="false">粉丝({$user.fans_count})</a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-9">
						<div class="tab-content" id="v-pills-tabContent">
							<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
								aria-labelledby="v-pills-home-tab">
								<div class="video-details">
									<div class="latest_vidz">
										<div class="vidz_list">
											<h5 class="p-4"> 最新作品</h5>
											<php>
												$where=['post.user_id'=>$userId];
											</php>
											<portal:articles page="5" where="$where" order="post.published_time DESC">
												<div class="tb-pr">
													<div class="row videoo">
														<div class="col-md-4 col-4 vid_thumbainl">
															<a
																href="{:cmf_url('portal/Article/index',array('id'=>$vo.id,'cid'=>$vo['categories'][0]['id']))}">
																<img src="{:cmf_get_image_url($vo.more.thumbnail)}"
																	alt="" class="img-fluid">
															</a>
														</div>
														<div class="col-md-4 col-4">
															<div class="h-100 position-relative">
																<div class="position-absolute-center w-100">
																	<h5>
																		<a href="{:cmf_url('portal/Article/index',array('id'=>$vo.id,'cid'=>$vo['categories'][0]['id']))}"
																			title="{$vo.post_title}">
																			{$vo.post_title}
																		</a>
																	</h5>
																	<h6>
																		{$vo.user.user_nickname}
																		<span class="verify_ic"><i
																				class="icon-tick"></i></span>
																	</h6>
																	<span>
																		<i class="fa fa-1x fa-eye"
																			aria-hidden="true"></i>
																		{$vo.post_hits}
																		&nbsp;&nbsp;{:func_friendly_time($vo.published_time)}
																	</span>
																</div>
															</div>
														</div>
														<div class="col-md-4 col-4">
															<div class="h-100 position-relative">
																<div class="position-absolute-center icon-list">
																	<ul>
																		<li>
																			<a href="{:cmf_url('portal/Article/index',array('id'=>$vo.id,'cid'=>$vo['categories'][0]['id']))}"
																				title="查看">
																				<i class="fa fa-1x fa-eye"
																					aria-hidden="true"></i></a>
																		</li>
																		<li>
																			<a href="{:cmf_url('portal/Article/edit',array('id'=>$vo.id,'cid'=>$vo['categories'][0]['id']))}"
																				title="修改">
																				<i class="icon-pencil"></i>
																			</a>
																		</li>
																		<li>
																			<a href="{:cmf_url('portal/Article/delete',array('id'=>$vo.id,'cid'=>$vo['categories'][0]['id']))}"
																				class="js-ajax-delete" title="删除">
																				<i class="icon-cancel"></i>
																			</a>
																		</li>
																	</ul>
																</div>
															</div>
														</div>
													</div>
												</div>
											</portal:articles>
										</div>

									</div>
								</div>
							</div>
							<div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
								aria-labelledby="v-pills-profile-tab">
								<php>
									$where=['post.user_id'=>$userId];
								</php>
								<user:favorite where="$where">
									<div class="tb-pr">
										<div class="row videoo">
											<div class="col-md-4 col-4 vid_thumbainl">
												<a
													href="{:cmf_url('portal/Article/index',array('id'=>$vo.id,'cid'=>$vo['article']['categories'][0]['id']))}">
													<img src="{:cmf_get_image_url($vo['article']['more']['thumbnail'])}"
														alt="" class="img-fluid">
												</a>
											</div>
											<div class="col-md-8 col-8">
												<div class="h-100 position-relative">
													<div class="position-absolute-center w-100">
														<h5>
															<a href="{:cmf_url('portal/Article/index',array('id'=>$vo.id,'cid'=>$vo['article']['categories'][0]['id']))}"
																title="{$vo.post_title}">
																{$vo.post_title}
															</a>
														</h5>
														<h6>
															{$vo['article']['user']['user_nickname']}
															<span class="verify_ic"><i class="icon-tick"></i></span>
														</h6>
														<span>
															<i class="fa fa-1x fa-eye" aria-hidden="true"></i>
															{$vo.post_hits}
															&nbsp;&nbsp;{:func_friendly_time($vo.published_time)}
														</span>
													</div>
												</div>
											</div>

										</div>
									</div>
								</user:favorite>
							</div>
							<div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
								aria-labelledby="v-pills-messages-tab">
								<php>
									$where=['post.user_id'=>$userId];
								</php>
								<user:like item="item" where="$where">
									<div class="tb-pr">
										<div class="row videoo">
											<div class="col-md-4 col-4 vid_thumbainl">
												<a
													href="{:cmf_url('portal/Article/index',array('id'=>$item['article']['id'],'cid'=>$item['article']['categories'][0]['id']))}">
													<img src="{:cmf_get_image_url($item['article']['more']['thumbnail'])}"
														alt="" class="img-fluid">
												</a>
											</div>
											<div class="col-md-8 col-8">
												<div class="h-100 position-relative">
													<div class="position-absolute-center w-100">
														<h5>
															<a href="{:cmf_url('portal/Article/index',array('id'=>$item['article']['id'],'cid'=>$item['article']['categories'][0]['id']))}"
																title="{$item['article']['post_title']}">
																{$item['article']['post_title']}
															</a>
														</h5>
														<h6>
															{$item['article']['user']['user_nickname']}
															<span class="verify_ic"><i class="icon-tick"></i></span>
														</h6>
														<span>
															<i class="fa fa-1x fa-eye" aria-hidden="true"></i>
															{$item['article']['post_hits']}
															&nbsp;&nbsp;{:func_friendly_time($item['article']['published_time'])}
														</span>
													</div>
												</div>
											</div>

										</div>
									</div>
								</user:like>
							</div>

							<div class="tab-pane fade" id="v-pills-user" role="tabpanel"
								aria-labelledby="v-pills-user-tab">
								<div class="blocked-pr mange_sub">
									<div class="manage-sub">
										<h2 class="hd-op"> 关注</h2>
										<div class="clearfix"></div>
									</div>
									<div class="blckd_list">
										<user:follow item="item" where="$where">
											<div class="blocked-vcp">
												<div class="vcp_inf">
													<span class="vc_hd">
														<a href="{:cmf_url('user/Profile/about',['id'=>$item.follow_user_id])}"
															title="">
															<img style="width: 61px !important;height: 61px !important"
																class="imf-fluid rounded-circle"
																src="{:cmf_get_image_url($item.avatar)}" alt="">
														</a>
													</span>
													<div class="vc_info st">
														<h4><a href="{:cmf_url('user/Profile/about',['id'=>$item.follow_user_id])}"
																title="">{$item.user_nickname}</a>
														</h4>
														<span>粉丝：{$item.fans_count}
															&nbsp;&nbsp;&nbsp;作品：{$item.article_count}</span>
													</div>
												</div>
												<a href="{:cmf_url('user/UserFollow/cancelFollowUser',['id'=>$item.follow_user_id])}"
													title="" class="play_ms btn btn-outline-info btn-sm js-count-btn">
													取关
												</a>
												<div class="clearfix"></div>
											</div>
										</user:follow>
									</div>
								</div>
							</div>
							<div class="tab-pane fade" id="v-pills-fans" role="tabpanel"
								aria-labelledby="v-pills-fans-tab">
								<div class="blocked-pr mange_sub">
									<div class="manage-sub">
										<h2 class="hd-op"> 粉丝</h2>
										<div class="clearfix"></div>
									</div>
									<div class="blckd_list">
										<php>
											$where=['follow_user_id'=>$userId];
										</php>
										<user:fans item="item" where="$where">
											<div class="blocked-vcp">
												<div class="vcp_inf">
													<span class="vc_hd">
														<a href="{:cmf_url('user/Profile/about',['id'=>$item.user_id])}"
															title="">
															<img style="width: 61px !important;height: 61px !important"
																class="imf-fluid rounded-circle"
																src="{:cmf_get_image_url($item.avatar)}" alt="">
														</a>
													</span>
													<div class="vc_info st">
														<h4><a href="{:cmf_url('user/Profile/about',['id'=>$item.user_id])}"
																title="">{$item.user_nickname}</a>
														</h4>
														<span>粉丝：{$item.fans_count}
															&nbsp;&nbsp;&nbsp;作品：{$item.article_count}</span>
													</div>
												</div>
												<a href="{:cmf_url('user/UserFollow/followUser',['id'=>$item.user_id])}"
													title="" class="play_ms btn btn-outline-info btn-sm js-count-btn">
													关注
												</a>
												<div class="clearfix"></div>
											</div>
										</user:fans>
									</div>
								</div>
							</div>
							<div class="tab-pane fade" id="v-pills-avatar" role="tabpanel"
								aria-labelledby="v-pills-avatar-tab">
								<div class="blocked-pr mange_sub">
									<div class="manage-sub">
										<h2 class="hd-op"> 修改头像</h2>
										<div class="clearfix"></div>
									</div>
									<div class="blckd_list">
										<div class="avatarwrap">
											<div id="jqueryCropper" class="avatar-cropper">
												<img id="userAvatarImage"
													src="{:cmf_get_user_avatar_url($user.avatar)}">
											</div>
											<div class="avatar-preview">
												<div class="UserPreview">
													<div class="img-preview preview-lg"></div>
													<div class="img-preview preview-md"></div>
													<div class="img-preview preview-sm"></div>
												</div>
											</div>
										</div>
										<div class="avatar-Tools">
											<div class="btn-group">
												<button type="button" class="btn eventBtn" role="group"
													data-method="setDragMode" data-option="move" title="移动图片"><span
														class="fa fa-arrows"></span> 移动</button>
												<button type="button" class="btn eventBtn" role="group"
													data-method="setDragMode" data-option="crop" title="裁剪图片"><span
														class="fa fa-crop"></span> 裁剪</button>
												<button type="button" class="btn eventBtn" role="group"
													data-method="rotate" data-option="-10" title="向左旋转图片"><span
														class="fa fa-rotate-left"></span>
													左旋</button>
												<button type="button" class="btn eventBtn" role="group"
													data-method="rotate" data-option="10" title="向又旋转图片"><span
														class="fa fa-rotate-right"></span>
													右旋</button>
											</div>
											<div class="btn-group">
												<label class="btn btn-primary eventBtn" for="inputImage" title="打开图片">
													<input type="file" class="sr-only" id="inputImage" name="file"
														accept=".jpg,.jpeg,.png">
													<span class="fa fa-upload"></span> 上传
												</label>
												<button type="button" class="btn btn-info eventBtn ml-2" role="group"
													style="height: 31.5px;" data-method="reset" title="重置图片"><span
														class="fa fa-refresh"></span> 重置</button>
											</div>
											<button id="saveavatar" type="button"
												class="btn btn-success btn-lg btn-block btnsave eventBtn"><i
													class="fa fa-save"></i>
												确认保存</button>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</section>
	</div>

	<include file="public@footer" />
	<include file="public@scripts" />
	<script src="__TMPL__/public/assets/simpleboot3/cropper/cropper.js"></script>
	<script src="__TMPL__/public/assets/simpleboot3/cropper/jquery-cropper.min.js"></script>
	<script src="__TMPL__/public/assets/simpleboot3/canvas-to-blob/canvas-to-blob.min.js"></script>
	<script type="text/javascript">
		// 初始化变量
		<php> $uploadedImageName = empty($avatar) ? '' : 'temp_image.jpg'; </php>
		var nzc = $("#jqueryCropper");
		var nzi = $('#userAvatarImage');
		var n2i = $('#inputImage');
		var originalImageURL = n2i.attr('src');
		var uploadedImageName = '{$uploadedImageName}';
		var uploadedImageType = 'image/jpeg';
		var uploadedImageURL = '';
		var uploadedParams = {};
		var options = {
			aspectRatio: 1 / 1,
			preview: '.img-preview',
			viewMode: 2
		};

		// ready事件
		$(function () {

			// 监听工具栏按钮
			$('button[data-method]').on('click', function () {
				nzi.cropper($(this).data('method'), $(this).data('option'))
			})

			// 监听上传控件内容变更
			n2i.change(function () {

				var files = this.files;
				var file;

				if (!nzi.data('cropper')) {
					return;
				}

				if (files && files.length) {

					file = files[0];

					if (/^image\/\w+$/.test(file.type)) {

						uploadedImageName = file.name;
						uploadedImageType = file.type;

						if (uploadedImageURL) {
							URL.revokeObjectURL(uploadedImageURL);
						}

						uploadedImageURL = URL.createObjectURL(file);

						nzi.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
						n2i.val('');
					} else {
						window.alert('Please choose an image file.');
					}
				}
			})

			// 监听保存
			$('#saveavatar').on('click', function () {

				// 禁用所有控件
				$('.eventBtn').prop('disabled', true);
				$('.btnsave').html('<i class="fa fa-spinner fa-pulse fa-fw"></i> 上传中');

				// 判断是否有数据
				let tmp_img = nzi.cropper('getCroppedCanvas', {
					width: 512,
					height: 512
				})
				if (!tmp_img) alert('请上传图片。');

				// 转blob上传
				tmp_img.toBlob(function (blob) {

					// 创建form
					var formData = new FormData();
					formData.append('file', blob, uploadedImageName);

					// 禁用cropper
					nzi.cropper('disable')

					// ajax 上传
					Wind.use("noty", function () {
						$.ajax("{:cmf_url('user/Profile/avatarUpload')}", {
							method: "POST",
							data: formData,
							processData: false,
							contentType: false,
							success: function (e) {
								delay_url = e.url
								noty({
									text: e.msg,
									type: ((e.code == 0) ? 'error' :
										'success'),
									layout: 'center'
								})
								$('.eventBtn').prop('disabled', false);
								$('.btnsave').html(
									'<i class="fa fa-save"></i> 确认保存');
								nzi.cropper('enable')
								if (e.url != '') {
									setTimeout(function () {
										window.location.href = e.url
									}, (e.wait - 1) * 1000)
								}
								console.log(e)
							},
							error: function (e) {
								noty({
									text: '网络连接失败。',
									type: 'error',
									layout: 'center'
								})
								$('.eventBtn').prop('disabled', false);
								$('.btnsave').html(
									'<i class="fa fa-save"></i> 确认保存');
								nzi.cropper('enable')
							}
						})
					})

				}, "image/jpeg", 0.85);

			});

			// 初始化裁剪窗口
			nzi.cropper(options);
		})
	</script>
	<script>
		$('#v-pills-tab1 a').on('click', function (e) {
			e.preventDefault()
			$(this).tab('show')
		})
	</script>
</body>

</html>